<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:v="http://corejsf.com/validator">

    <f:view>
        <f:loadBundle var="text" basename="#{invoiceForm.bundleName}"/>
        <head>
            <title>#{text['invoiceDetail.title']}</title>
            <meta name="heading" content="#{text['invoiceDetail.heading']}"/>
            <meta name="menu" content="OperationMenu"/>
        </head>

        <div class="separator"></div>

        <h:form id="invoiceForm">
            <h:inputHidden value="#{invoiceForm.invoice.id}" id="id"/>

            <h:panelGrid columns="3">

                <h:panelGroup styleClass="buttonBar right">
                    <c:if test="#{invoiceForm.invoice.status != 'CANCELADA'}">
                        <h:commandButton value="#{text['button.save']}" action="#{invoiceForm.save}"
                                         id="save" styleClass="button"/>
                    </c:if>
                    <c:if test="${not empty invoiceForm.invoice.id}">
                        <c:if test="#{invoiceForm.invoice.status != 'CANCELADA'}">
                            <h:commandButton id="print" value="#{text['button.print']}"
                                             onclick="return printInvoice(#{invoiceForm.invoice.id});"
                                             styleClass="button"/>
                        </c:if>
                        <c:if test="#{invoiceForm.invoice.status == 'ACTIVA'}">
                            <h:commandButton value="#{text['button.cancel']}" action="#{invoiceForm.cancel}" immediate="true"
                                             id="cancel" styleClass="button"/>
                        </c:if>
                    </c:if>
                    <h:commandButton value="#{text['button.close']}" action="cancel" immediate="true"
                                     id="close" styleClass="button"/>
                </h:panelGroup>
                <h:outputText/><h:outputText/>

                <h:panelGroup>
                    <div>
                        <div class="left">
                            <h:outputLabel styleClass="desc" for="_id" value="#{text['invoice.id']}"/>
                            <h:inputText styleClass="text medium" id="_id" value="#{invoiceForm.invoice.id}" readonly="true"/>
                        </div>
                        <div>
                            <h:outputLabel styleClass="desc" for="status" value="#{text['invoice.status']}"/>
                            <h:inputText styleClass="text medium" id="status" value="#{invoiceForm.invoice.status}" readonly="true"/>
                        </div>
                    </div>
                </h:panelGroup>

                <h:outputText/><h:outputText/>

                <h:outputLabel for="number" styleClass="desc" value="#{text['invoice.number']}"/>
                <h:inputText value="#{invoiceForm.invoice.number}" id="number" styleClass="text large"/>

                <h:outputText/><h:outputText/>
                
                <h:panelGroup>
                    <div>
                        <div class="left">
                            <h:outputLabel styleClass="desc" for="quotation" value="#{text['invoice.quotation']}"/>
                            <h:inputText styleClass="text medium" id="quotation" value="#{invoiceForm.invoice.quotation.id}" readonly="true"/>
                        </div>
                        <div>
                            <h:outputLabel styleClass="desc" for="quotationDate" value="#{text['invoice.quotation.transDate']}"/>
                            <h:inputText styleClass="text medium" id="quotationDate" value="#{invoiceForm.invoice.quotation.transDate}" readonly="true">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:inputText>
                        </div>
                    </div>
                </h:panelGroup>

                <h:outputText/><h:outputText/>

                <h:outputLabel for="description" styleClass="desc" value="#{text['invoice.description']}"/>
                <h:inputText value="#{invoiceForm.invoice.description}" id="description" readonly="true" styleClass="text large"/>

                <h:outputText/><h:outputText/>

                <h:panelGroup>
                    <div>
                        <div class="left">
                            <h:outputLabel styleClass="desc" for="date" value="#{text['invoice.date']}"/>
                            <h:inputText styleClass="text medium" id="date" value="#{invoiceForm.invoice.date}" readonly="true">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:inputText>
                            <t:message for="date" styleClass="fieldError"/>
                        </div>
                        <div>
                            <h:outputLabel styleClass="desc" for="expirationDate" value="#{text['invoice.expirationDate']}"/>
                            <h:inputText styleClass="text medium" id="expirationDate" value="#{invoiceForm.invoice.expirationDate}" readonly="true">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:inputText>
                            <t:message for="expirationDate" styleClass="fieldError"/>
                        </div>
                    </div>
                </h:panelGroup>
                <h:outputText/><h:outputText/>

                <h:panelGroup>
                    <div>
                        <div class="left">
                            <h:outputLabel styleClass="desc" for="currency" value="#{text['invoice.currency']}"/>
                            <h:inputText styleClass="text medium" id="currency" value="#{invoiceForm.invoice.currency.description} " readonly="true"/>
                            <t:message for="currency" styleClass="fieldError"/>
                        </div>
                        <div>
                            <h:outputLabel styleClass="desc" for="exchangeRate" value="#{text['invoice.exchangeRate']}"/>
                            <h:inputText styleClass="text medium" id="exchangeRate" value="#{invoiceForm.invoice.exchangeRate} " readonly="true"/>
                            <t:message for="exchangeRate" styleClass="fieldError"/>
                        </div>
                    </div>
                </h:panelGroup>
                <h:outputText/><h:outputText/>

                <h:panelGroup>
                    <div>
                        <div class="left">
                            <h:outputLabel styleClass="desc" for="company" value="#{text['invoice.company']}"/>
                            <h:inputText styleClass="text medium" id="company" value="#{invoiceForm.invoice.company.description} " readonly="true"/>
                            <t:message for="company" styleClass="fieldError"/>
                        </div>
                        <div>
                            <h:outputLabel styleClass="desc" for="contact" value="#{text['invoice.contact']}"/>
                            <h:inputText styleClass="text medium" id="contact" value="#{invoiceForm.invoice.contact.firstName} #{invoiceForm.invoice.contact.lastName}" readonly="true"/>
                            <t:message for="contact" styleClass="fieldError"/>
                        </div>
                    </div>
                </h:panelGroup>
                <h:outputText/><h:outputText/>

                <t:dataTable value="#{invoiceForm.invoice.details}" var="detail" width="100%" id="_products"
                             styleClass="scrollerTable table">
                    <f:facet name="spacer">
                        <f:verbatim>&amp;#160;</f:verbatim>
                    </f:facet>
                    <t:column width="30%">
                        <f:facet name="header">
                            <t:outputText value="#{text['quotation.product.description']}"/>
                        </f:facet>
                        <t:outputText value="#{detail.quotationDetail.product.description}" rendered="#{detail.quotationDetail.product != null}"/>
                        <t:outputText value="#{detail.quotationDetail.itemDescription}" rendered="#{detail.quotationDetail.product == null}"/>
                    </t:column>
                    <t:column width="15%">
                        <f:facet name="header">
                            <t:outputText value="#{text['quotation.product.price']}"/>
                        </f:facet>
                        <t:outputText value="#{detail.quotationDetail.price}" style="text-align: right;">
                            <f:convertNumber type="number" pattern="#,##0.00;(#,##0.00)"/>
                        </t:outputText>
                    </t:column>
                    <t:column width="15%">
                        <f:facet name="header">
                            <t:outputText value="#{text['quotation.product.quantity']}"/>
                        </f:facet>
                        <t:outputText value="#{detail.quotationDetail.quantity}" style="text-align: right;"/>
                        <f:facet name="footer">
                            <h:panelGrid>
                                <h:outputText value="Sub Total:"/>
                                <h:outputText value="Impuesto:"/>
                                <h:outputText value="Total:"/>
                            </h:panelGrid>
                        </f:facet>
                    </t:column>
                    <t:column width="15%">
                        <f:facet name="header">
                            <t:outputText value="#{text['quotation.product.subTotal']}"/>
                        </f:facet>
                        <t:outputText value="#{detail.quotationDetail.subTotal}" style="text-align: right;">
                            <f:convertNumber type="number" pattern="#,##0.00;(#,##0.00)"/>
                        </t:outputText>
                        <f:facet name="footer">
                            <h:panelGrid>
                                <t:inputText id="_pSubTotal" value="#{invoiceForm.invoice.subTotal}" style="text-align: right;" readonly="true">
                                    <f:convertNumber type="number" pattern="#,##0.00;(#,##0.00)"/>
                                </t:inputText>
                                <t:inputText id="_pTax" value="#{invoiceForm.invoice.tax}" style="text-align: right;" readonly="true">
                                    <f:convertNumber type="number" pattern="#,##0.00;(#,##0.00)"/>
                                </t:inputText>
                                <t:inputText id="_pTotal" value="#{invoiceForm.invoice.total}" style="text-align: right;" readonly="true">
                                    <f:convertNumber type="number" pattern="#,##0.00;(#,##0.00)"/>
                                </t:inputText>
                                <t:htmlTag value="p"><h:outputLabel for="_pTotal" value="#{invoiceForm.invoice.currency}" rendered="#{invoiceForm.invoice.currency != null}"/></t:htmlTag>
                            </h:panelGrid>
                        </f:facet>
                    </t:column>
                </t:dataTable>
                <h:outputText/><h:outputText/>

                <h:outputLabel for="equivalentAmount" styleClass="desc" value="#{text['invoice.equivalentAmount']}"/>
                <h:inputText value="#{invoiceForm.invoice.equivalentAmount}" id="equivalentAmount" readonly="true" styleClass="text large">
                    <f:convertNumber type="number" pattern="#,##0.00;(#,##0.00)"/>
                </h:inputText>
                <t:htmlTag value="p"><h:outputLabel for="equivalentAmount" value="#{invoiceForm.invoice.exchangeCurrency}" rendered="#{invoiceForm.invoice.exchangeCurrency != null}"/></t:htmlTag>
                <h:outputText/><h:outputText/>

                <h:panelGroup>
                    <div>
                        <div class="left">
                            <h:outputLabel styleClass="desc" for="localAmountPaid" value="#{text['invoice.localAmountPaid']}"/>
                            <h:inputText styleClass="text medium" id="localAmountPaid" value="#{invoiceForm.invoice.localAmountPaid} " readonly="true"/>
                            <t:message for="localAmountPaid" styleClass="fieldError"/>
                        </div>
                        <div>
                            <h:outputLabel styleClass="desc" for="foreignAmountPaid" value="#{text['invoice.foreignAmountPaid']}"/>
                            <h:inputText styleClass="text medium" id="foreignAmountPaid" value="#{invoiceForm.invoice.foreignAmountPaid} " readonly="true"/>
                            <t:message for="foreignAmountPaid" styleClass="fieldError"/>
                        </div>
                    </div>
                </h:panelGroup>
                
                <h:outputText/><h:outputText/>
                <h:panelGroup>
                    <t:htmlTag value="div" styleClass="group">
                        <t:htmlTag value="div" styleClass="left">
                            <h:inputText id="createdBy" disabled="true"
                                         value="#{invoiceForm.invoice.createdBy.fullName}"/>
                            <t:htmlTag value="p"><h:outputLabel for="createdBy" value="#{text['invoice.createdBy']}"/></t:htmlTag>
                        </t:htmlTag>
                        <t:htmlTag value="div">
                            <h:inputText id="createdOn" disabled="true"
                                         value="#{invoiceForm.invoice.createdOn}"/>
                            <t:htmlTag value="p"><h:outputLabel for="createdOn" value="#{text['invoice.createdOn']}"/></t:htmlTag>
                        </t:htmlTag>
                        <t:htmlTag value="div" styleClass="left">
                            <h:inputText id="modifiedBy" disabled="true"
                                         value="#{invoiceForm.invoice.modifiedBy.fullName}"/>
                            <t:htmlTag value="p"><h:outputLabel for="modifiedBy" value="#{text['invoice.modifiedBy']}"/></t:htmlTag>
                        </t:htmlTag>
                        <t:htmlTag value="div">
                            <h:inputText id="modifiedOn" disabled="true"
                                         value="#{invoiceForm.invoice.modifiedOn}"/>
                            <t:htmlTag value="p"><h:outputLabel for="modifiedOn" value="#{text['invoice.modifiedOn']}"/></t:htmlTag>
                        </t:htmlTag>
                    </t:htmlTag>
                </h:panelGroup>
            </h:panelGrid>
            <t:saveState id="invoice" value="#{invoiceForm.invoice}" />
        </h:form>

        <script type="text/javascript">
            Form.focusFirstElement($('invoiceForm'));
            highlightFormElements();
        </script>
        <script type="text/javascript">
            function printInvoice(id){
               window.open('/suarte-web/documento.pdf?id=' + id + '&amp;type=invoice','Suarte','height=800,width=700,status=yes,toolbar=no,menubar=no,location=no,resizable=yes');
               return false;
            }
        </script>
    </f:view>
</html>